<template>
	<view class="player">
		<!-- #ifdef MP-WEIXIN -->
		<view class="player-back" :style="{ top: selectBarTop + 'px' }" @click="handleBackClick">返回</view>
		<!-- #endif -->

		<view class="player-video">
			<VideoPlayer ref="videoPlayerRef" :video-data="playerData.detail" @followClick="handleFollowClick" :episodeBottom="20" />
		</view>

		<view class="player-bottom" :style="{ paddingTop: isIOS ? '50rpx' : '' }" @click="handleBottomClick">
			<view class="bottom-content">
				<view class="bottom-content-left">{{ currentPlayingItem.script_name }} · 共{{ playerData.total }}集</view>

				<view class="bottom-content-right">
					<image class="bottom-content-right-img" src="@/static/images/icons/arrow_right.png" mode="heightFix"></image>
				</view>
			</view>
		</view>

		<view class="player-select">
			<PlayerPopup ref="playerPopRef" :currentPlayingItem="currentPlayingRefItem" @changeEpisode="handleChangeEpisode" />
		</view>
	</view>
</template>

<script setup>
	import PlayerPopup from './parts/player-popup.vue';
	import VideoPlayer from '@/components/video-player/video-player.vue';
	import usePlayerStore from '@/stores/player/player.js';
	import useCommonStore from '@/stores/common/common';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed, onMounted, nextTick, watch } from 'vue';
	import { storeToRefs } from 'pinia';
	import useHomeStore from '../../stores/home/home';

	// - store
	const playerStore = usePlayerStore();
	const commonStore = useCommonStore();
	const homeStore = useHomeStore();
	const { playerData } = storeToRefs(playerStore);
	const { systemInfo, followHistory } = storeToRefs(commonStore);

	// - data
	const playerPopRef = ref(null);
	const videoPlayerRef = ref(null);
	const selectBarTop = ref(0);
	const isIOS = ref(false);
	const currentPlayingItem = ref({});
	const currentSkipId = ref();

	const currentPlayingRefItem = computed(() => {
		if (playerData.value.detail) {
			console.log(playerData.value.detail[videoPlayerRef.value?.currentIndexCpt ?? 0]);
			return playerData.value.detail[videoPlayerRef.value?.currentIndexCpt ?? 0];
		} else {
			return {};
		}
	});

	// - methods
	// 获取数据
	const handleFetchPlayerData = () => {
		playerStore.fetchPlayerDataAction(currentSkipId.value);
	};
	// 返回
	const handleBackClick = () => {
		uni.navigateBack({
			success() {
				homeStore.fetchHomeVideoAction();
			}
		});
	};
	// 点击打开选集
	const handleBottomClick = () => {
		nextTick(() => {
			playerPopRef.value.handleOpenPop();
		});
	};
	// 换集
	const handleChangeEpisode = (episode) => {
		// 注意索引需要减一
		const index = episode - 1;

		nextTick(() => {
			videoPlayerRef.value?.turnToN(index);
		});
	};
	// 收藏
	const handleFollowClick = (item) => {
		playerData.value.detail.forEach((it) => {
			if (it.isFollow == 0) {
				it.isFollow = 1;
				commonStore.rememberFollowHistoryData(item);
			} else if (it.isFollow == 1) {
				it.isFollow = 0;
				commonStore.removeFollowHistoryData(item);
			}
		});
	};

	// - lifecycle
	onLoad((option) => {
		currentSkipId.value = option.skipId;
		playerStore.fetchPlayerDataAction(option.skipId, () => {
			currentPlayingItem.value = playerData.value.detail.find((item) => item.id == option.id) ?? {};
		});

		onMounted(() => {
			selectBarTop.value = systemInfo.value.statusBarHeight + systemInfo.value.capsuleMidHeight + systemInfo.value.capsuleHeight / 2 - 10;
			isIOS.value = uni.getSystemInfoSync().platform == 'ios';

			if (option.isOpen == 1) {
				setTimeout(() => {
					playerPopRef.value?.handleOpenPop();
				}, 300);
			}

			if (option.isNext == 1) {
				videoPlayerRef.value?.turnToNext();
			} else {
				videoPlayerRef.value?.turnToN(Number(option.current_episode - 1));
			}
		});
	});
</script>

<style lang="scss">
	.player {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100vh;
		overflow-y: auto;
		background-color: #000000;

		.player-back {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 99;
			color: #ffffff;
			font-size: 32rpx;
			box-sizing: border-box;
			padding-left: 20rpx;
		}

		.player-video {
			flex: 1;
		}

		.player-bottom {
			box-sizing: border-box;
			padding: 20rpx 30rpx 30rpx 30rpx;
			width: 100%;
			height: 56px;
			display: flex;
			align-items: center;
			color: #ffffff;
			background: #000000;
			z-index: 99;

			.bottom-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 40rpx;
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
				background: #141414;

				.bottom-content-left {
					font-size: 24rpx;
					font-weight: 500;
					color: #ffffff;
					word-break: keep-all;
					white-space: nowrap;
				}
				.bottom-content-right {
					.bottom-content-right-img {
						height: 26rpx;
					}
				}
			}
		}
	}
</style>
